<template>
  <div class="container">
    <el-card style="margin-bottom: 25px" shadow="hover">
      <template #header>
        <span class="title">技术选型</span>
      </template>
      <p>前端：Vue3.2 + TypeScript + Element-Plus + Axios + Pinia + Echarts</p>
      <p>后端：Node.js</p>
      <p>数据库：MySQL 8.0</p>
    </el-card>
    <el-card shadow="hover">
      <template #header>
        <span class="title">目录结构</span>
      </template>
      <p>src源码文件夹各目录详解</p>
      <ul>
        <li>assets: 存放css/img/font等静态资源的文件夹，其中，css文件夹里面有定义的全局样式和字体图标的样式。</li>
        <li>components: 存放项目中的公共组件，我封装了table/title/icon/header/tags等公共组件。</li>
        <li>constants: 存放项目中用到的一些特殊的常量。</li>
        <li>
          network: 存放网络请求API的文件夹，其中，我对axios进行了二次封装，并将网络请求的相关参数配置抽离成单独的文件，api文件夹存放着具体的请求。
        </li>
        <li>router: 路由。</li>
        <li>store: Pinia状态管理。</li>
        <li>utils: 存放项目中需要用到的一些工具函数。</li>
        <li>views: 根据业务逻辑，划分的文件夹，里面是具体的实现组件。</li>
      </ul>
      <pre>{{ STSTEM_DIR }}</pre>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
  import { STSTEM_DIR } from '@/constants'
</script>

<style lang="less" scoped>
  .title {
    font-size: 24px;
    margin: 15px 0;
    font-weight: 600;
  }

  p {
    font-size: 15px;
    margin: 12px 0;
    line-height: 1.8;
  }

  ul {
    margin: 12px 0;
    margin-left: 25px;

    li {
      font-size: 16px;
      margin: 12px 0;
    }
  }
</style>
